<template>
  <div class="goods">
    <div class="top_box">
      <van-field
        label="客户"
        :readonly="true"
        :placeholder="cusName"
        input-align="right"
      />
      <van-field
        label="商品"
        :readonly="true"
        :placeholder="prodName"
        input-align="right"
      />
      <van-field
        :readonly="true"
        label="数量"
        :placeholder="prodNum"
        input-align="right"
      />
      <van-field
        label="下单人"
        :readonly="true"
        :placeholder="orderUserName"
        input-align="right"
      />
      <van-field
        label="下单时间"
        :placeholder="orderTime"
        input-align="right"
      />
    </div>
    <div class="box_bottom">
      <div class="b-box">
        <span>收货人</span>
        <input type="text" placeholder="张三" v-model="user1" />
      </div>
      <div class="b-box">
        <span>联系电话</span>
        <input type="number" placeholder="130 0000 0000" v-model="user2" />
      </div>
      <div class="b-box">
        <span class="te">收货地址</span>
        <textarea
          placeholder="广东省 广州市 天河区 棠下街道 大地工业区D栋"
          v-model="user3"
        ></textarea>
      </div>
      <div class="b-box">
        <span>物流单号</span>
        <input type="number" :placeholder="belongUser" disabled="disabled" />
      </div>
    </div>
    <div class="last">
      <div class="btn" @click="btn">确认发货消息</div>
    </div>
    <p>{{ user1 }}</p>
    <p>{{ user2 }}</p>
    <p>{{ user3 }}</p>
  </div>
</template>
 
<script>
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
import { GetGoodsList, GetDingXList } from "../request/aip";
export default {
  data() {
    return {
      //   收货人
      user1: "",
      //   电话
      user2: "",
      //   地址
      user3: "",
      //   数据列表
      cusName: "",
      prodName: "",
      prodNum: "",
      orderUserName: "",
      orderTime: "",
      belongUser: "",
      serialNo: "",
    };
  },
  created() {
    // console.log(this.$route.params.item);
    let arr = this.$route.params.item;

    GetDingXList({
      serialNo: arr.serialNo,
    }).then((res) => {
      // console.log(res);
      let item = res.data;
      this.cusName = item.cusName;
      this.prodName = item.prodName;
      this.prodNum = String(item.prodNum);
      this.orderUserName = item.orderUserName;
      this.orderTime = item.orderTime;
      this.belongUser = item.belongUser;
      this.serialNo = item.serialNo;
    });
  },
  methods: {
    //   提交事件
    btn() {
      GetGoodsList({
        serialNo: this.serialNo,
        receiver: this.user1 || "张三",
        linkPhone: this.user2 || "13022222222",
        address: this.user3 || "广东省 广州市 天河区 棠下街道 大地工业区D栋",
        logisticsCode: this.belongUser,
      }).then((res) => {
        console.log(res);
        Toast.success({
          message: "操作成功",
          forbidClick: true,
          loadingType: "spinner",
          duration: 1000,
        });
        setTimeout(() => {
          this.$router.go(-1);
        }, 1000);
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.goods {
  width: 100vw;
  height: 100%;
  background-color: #f5f5f5;
  overflow: hidden;
  .top_box {
    margin-top: 20px;
  }
  .box_bottom {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px 10px;
    .b-box {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      span {
        width: 22%;
      }
      input {
        flex: 1;
        border: none;
        text-indent: 1em;
        background-color: #ececec;
        padding: 10px 0;
        border-radius: 5px;
      }
      .te {
        margin-bottom: 50px;
      }
      textarea {
        flex: 1;
        border: none;
        resize: none;
        background-color: #ececec;
        height: 80px;

        padding: 10px;
      }
    }
  }
  .last {
    margin-top: 40px;
    background-color: #fff;
    padding: 8px 10px;
    .btn {
      text-align: center;
      background-color: #003399;
      color: #fff;
      padding: 10px 0;
      border-radius: 30px;
    }
  }
}
</style>